import React, { useState, useEffect } from 'react'
import { Carousel } from 'antd-mobile';
import './banner.scss'

const BannerTop = (props: any) => {
  
  const [data, setData] = useState(props.data || [])

  useEffect(() => {

  })

  useEffect(() => {
    setData(props.data)
  }, [props.data])

  return (
    <Carousel
      className='banner-box'
      autoplay
      infinite
    >
      {data.map((val: any, index: number) => (
        <img
          key={val.pic}
          src={val.pic}
          alt=""
          className='banner-img'
          style={{ width: '100%', verticalAlign: 'top' }}
          onLoad={() => {
            // fire window resize event to change height
            window.dispatchEvent(new Event('resize'));
          }}
        />
      ))}
    </Carousel>
  )
}
export default BannerTop